<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { selectArticleService } from '@/api/article'
import { commentListService, addCommentService } from '@/api/comment'
import {
    UserFilled
} from '@element-plus/icons-vue'

const route = useRoute();
const query: any = route.query
const id = ref(query.id)

//获取文章详情
const article = ref({
    "id": 1,
    "title": "测试",
    "content": "测试",
    "description": "测试",
    "author": "zhangSan",
    "createTime": "",
    "category": "测试"
});
const selectArticle = async (id: any) => {
    let result = await selectArticleService(id);
    article.value = result.data;
}
selectArticle(id.value);

//评论树
interface Tree {
    id: number
    username: string
    pid: number
    content: string
    toCommentUserId: number
    createTime: string
    createBy: number
    children?: Tree[]
}
const dataSource = ref<Tree[]>([])
//分页条数据模型
const page = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(5)//每页条数
//获取文章评论树
const selectCommentTree = async () => {
    let params = {
        page: page.value,
        pageSize: pageSize.value,
        type: 0,
        titleId: id.value ? id.value : null,
    }
    let result = await commentListService(params);

    //渲染视图
    total.value = result.data.total;
    dataSource.value = result.data.records;
}
selectCommentTree();

//当每页条数发生了变化，调用此函数
const handleSizeChange = (size: number) => {
    pageSize.value = size
    selectCommentTree();
}
//当前页码发生变化，调用此函数
const handleCurrentChange = (num: number) => {
    page.value = num
    selectCommentTree();
}

//添加评论表单模型
const commentForm = ref({
    type: '0',
    titleId: id.value,
    pid: -1,
    content: "",
    toCommentUserId: -1,
})
const clearCommentForm = () => {
    commentForm.value = {
        type: '0',
        titleId: id.value,
        pid: -1,
        content: "",
        toCommentUserId: -1
    }
}
const reply = ref("")
//发表评论按钮显示
const isTextareaButton = ref(false)
//发表评论
const publishComment = async () => {
    let result = await addCommentService(commentForm.value) as any
    ElMessage.success(result.msg ? result.msg : '发表成功')
    selectCommentTree()
    clearCommentForm()
}
//回复评论对话框
const dialogVisible = ref(false)
const showdialog = (id: any, createBy: any) => {
    dialogVisible.value = true
    commentForm.value.pid = id
    commentForm.value.toCommentUserId = createBy
}
//回复评论
const replyComment = async () => {
    commentForm.value.content = reply.value
    let result = await addCommentService(commentForm.value) as any
    ElMessage.success(result.msg ? result.msg : '回复成功')
    selectCommentTree()
    clearCommentForm()
    dialogVisible.value = false
    reply.value = ''
}

</script>

<template>
    <div>
        <br>
        <div>
            <h1>{{ article.title }}</h1>
        </div>
        <span>
            <el-icon style="vertical-align: -10%;">
                <UserFilled />
            </el-icon>
            {{ article.author }} 发表于：
        </span>
        <span>{{ article.createTime }}</span>
    </div>
    <div class="content">
        <div v-html="article.content"></div>
    </div>
    <div class="publish">
        <h3>发表评论</h3>
        <div style="margin-top: 20px;">
            <el-input type="textarea" v-model="commentForm.content" placeholder="天青色等烟雨，而我在等你" :rows="2"
                @focus="isTextareaButton = true"></el-input>
            <div style="margin-top: 15px;text-align: right;">
                <el-button v-if="isTextareaButton" type="primary" @click="publishComment()">发表</el-button>
            </div>
        </div>

    </div>
    <div class="comment">
        <h1>| 评论</h1>
        <div style="margin-top: 50px;">
            <div v-for="item in dataSource" :key="item.id" style="margin-bottom: 30px;">
                <div class="avatar">
                    <el-avatar :size="50" :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
                    <div style="color: #909399;">{{ item.username }}</div>
                </div>
                <div style="margin-left: 60px;font-size: 18px;" v-html="item.content"></div>
                <div style="margin-left: 60px;margin-top: 10px;
                color: #909399;">
                    {{ item.createTime }}
                    <el-button text="true" @click="showdialog(item.id, item.createBy)">回复</el-button>
                </div>

                <div v-if="item.children?.length !== 0 ? true : false">
                    <div v-for="item1 in item.children" :key="item1.id" style="margin-left: 60px;">
                        <div class="avatar">
                            <el-avatar :size="50"
                                :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
                            <div style="color: #909399;">{{ item1.username }}</div>
                            <div style="margin-left: 20px;font-size: 18px;" v-html="item1.content"></div>
                        </div>
                        <div style="margin-left: 60px;margin-top: 10px;
                        color: #909399;">
                            {{ item1.createTime }}
                            <el-button text="true" @click="showdialog(item1.id, item1.createBy)">回复</el-button>
                        </div>

                        <div v-if="item1.children?.length !== 0 ? true : false">
                            <div v-for="item2 in item1.children" :key="item2.id">
                                <div class="avatar">
                                    <el-avatar :size="50"
                                        :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
                                    <div style="color: #909399;">{{ item2.username }}</div>
                                    <div style="margin-left: 20px;font-size: 18px">
                                        <span>回复 @{{ item1.username }} : </span>
                                        <span v-html="item2.content"></span>
                                    </div>
                                </div>
                                <div style="margin-left: 60px;margin-top: 10px;
                                    color: #909399;">
                                    {{ item2.createTime }}
                                    <el-button text="true" @click="showdialog(item2.id, item2.createBy)">回复</el-button>
                                </div>

                                <div v-if="item2.children?.length !== 0 ? true : false">
                                    <div v-for="item3 in item2.children" :key="item3.id">
                                        <div class="avatar">
                                            <el-avatar :size="50"
                                                :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
                                            <div style="color: #909399;">{{ item3.username }}</div>
                                            <div style="margin-left: 20px;font-size: 18px">
                                                <span>回复 @{{ item2.username }} : </span>
                                                <span v-html="item3.content"></span>
                                            </div>
                                        </div>
                                        <div style="margin-left: 60px;margin-top: 10px;
                                            color: #909399;">
                                            {{ item3.createTime }}
                                            <el-button text="true"
                                                @click="showdialog(item3.id, item3.createBy)">回复</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分页条 -->
            <el-pagination v-if="total === 0 ? false : true" v-model:current-page="page" v-model:page-size="pageSize" 
                background layout="sizes,prev, pager,next,jumper,total" 
                :page-sizes="[5, 10, 15, 20, 30]" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" >
            </el-pagination>

            <el-dialog v-model="dialogVisible">
                <el-input type="textarea" v-model="reply" placeholder="回复" :rows="2"></el-input>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisible = false; reply = ''; clearCommentForm()">取消</el-button>
                        <el-button type="primary" @click="replyComment()">发表</el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content {
    margin-left: 100px;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    /* 两端对齐，并且项目之间的间隔相等 */
    text-align: left;
    /* 文本靠左 */

}

.publish {
    margin-left: 100px;
    margin-top: 50px;
    /* 两端对齐，并且项目之间的间隔相等 */
    justify-content: space-between;
    /* 文本靠左 */
    text-align: left;
}

.comment {
    margin-left: 100px;
    margin-top: 50px;
    justify-content: space-between;
    /* 两端对齐，并且项目之间的间隔相等 */
    text-align: left;

    /* 文本靠左 */
    .avatar {
        display: flex;
        flex-direction: row;
        align-items: center;

        .el-avatar {
            margin-right: 10px;
        }
    }

    .el-pagination {
        margin-top: 30px;
    }

}
</style>